<template>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th v-for="(item, index) in columns" :key="index" :width="item.width || 'auto'">
            {{ item.title }}
          </th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(item, index) in data">
          <tr :key="index" @click="showChildren(index)">
            <td
              v-for="(column, subIndex) in columns"
              :key="subIndex"
              :class="[
                column.align || 'center'
              ]"
            >
              <template v-if="column.key && !column.name">
                <template v-if="item.children && subIndex === 0">
                  <span
                    :class="{
                      sj: true,
                      active: showChildrenIndexs.indexOf(index) !== -1
                    }"
                  ></span>
                </template>
                {{ getValue(item, column.key) }}
              </template>
              <template v-if="column.name">
                <slot :name="column.name" :row="item" :index="index"></slot>
              </template>
            </td>
          </tr>
          <template v-if="item.children">
            <tr
              v-for="(childItem, childIndex) in item.children"
              v-show="showChildrenIndexs.indexOf(index) !== -1"
              :key="childIndex + 'a' + index"
              class="child"
            >
              <td
                v-for="(column, subIndex) in columns"
                :key="subIndex"
                :class="[
                  column.align || 'center'
                ]"
              >
                <template v-if="column.key">
                  {{ getValue(childItem, column.key) }}
                </template>
                <!-- <template v-if="column.name">
                  <slot :name="column.name" :row="childItem" :index="childIndex"></slot>
                </template> -->
              </td>
            </tr>
          </template>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      showChildrenIndexs: []
    }
  },
  mounted () {
    console.log(this.$scopedSlots)
  },
  methods: {
    getValue (data, key) {
      let value = ''
      const keys = key.split('.')
      keys.forEach((item) => {
        value = !value ? data[item] : value[item]
      })
      return value
    },

    showChildren (index) {
      const findIndex = this.showChildrenIndexs.indexOf(index)
      if (findIndex !== -1) {
        this.showChildrenIndexs.splice(findIndex, 1)
      } else {
        this.showChildrenIndexs.push(index)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.table-wrap {
  width: 100%;
  .sj {
    @include arrow(bottom, 4px, $base-color);
    margin-right: 5px;
  }
  table {
    width: 100%;
  }
  thead {
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: $font-size-s;
    th {
      background: #f5f5f5;
      border-right: 1px solid #fff;
      color: $text-title-color;
      font-weight: normal;
    }
  }
  tbody {
    tr {
      td {
        font-size: $font-size-s;
        text-align: center;
        padding: 15px 10px;
        @include border1px(bottom, #f5f5f5);
        &.left {
          text-align: left;
        }
      }
      &.child {
        td {
          color: #ccc;
          &:first-child {
            padding-left: 22px;
          }
        }
      }
    }
  }
}
</style>
